<template>
    <el-main>
        <div class="row mb-1">
            <div class="col">
                <el-button @click="create(false)" type="primary"> + 添加</el-button>

            </div>
            <el-dialog width="450px" :title="title" @close="() => closed()" v-model="dialogVisible">
                <el-form :model="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="名称">
                        <el-input v-model="ruleForm.lessionName"></el-input>
                    </el-form-item>
                    <el-form-item label="类型">
                        <el-radio-group v-model="ruleForm.type">
                            <el-radio label="video">视频</el-radio>
                            <el-radio label="vector">文档</el-radio>
                            <!-- <el-radio label="question">题目</el-radio> -->

                        </el-radio-group>
                    </el-form-item>
                    <el-form-item v-show="ruleForm.type === 'video'" label="视频id">
                        <el-input v-model="ruleForm.videoId"></el-input>
                    </el-form-item>
                    <el-form-item v-show="ruleForm.type === 'vector'" label="文档id">
                        <el-input v-model="ruleForm.secretfileID"></el-input>
                    </el-form-item>
                    <!-- <el-form-item v-show="ruleForm.type === 'question'" label="题单ID">
                        <el-input v-model="ruleForm.questionid"></el-input>
                    </el-form-item> -->
                    <el-form-item label="排序">
                        <el-input-number v-model="ruleForm.num"></el-input-number>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input v-model="ruleForm.lessionInfo"></el-input>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="submit">确 定</el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
        <div class="row  mb-1">
            <div class="col">
                <el-table :data="tableData" border height="65vh" style="width: 100%">

                    <el-table-column label="名称" prop="lessionName">

                    </el-table-column>
                    <el-table-column label="排序" prop="num" width="80">
                    </el-table-column>
                    <el-table-column label="类型" prop="type" width="230">

                    </el-table-column>
                    <el-table-column label="操作" width="230">
                        <template #default="scope">
                            <el-button @click="create(scope.row)">
                                修改
                            </el-button>
                            <el-button @click="delteamuser(scope.row.ID)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

    </el-main>
</template>

<script setup lang="ts">
import {
    ref,
    onMounted,
    markRaw,
} from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { asyncmiaoadmincreatedorupdatelession, asyncmiaoadmindellession, asyncmiaoadminselectlession, Iobj } from "../../../api";
import Alymodel from "../../../mysql_interface/model";
import { assign } from "underscore";

type KIuser = keyof Alymodel.IMlession;

const p = defineProps<{ ID: number }>()



const dialogVisible = ref(false);
const sortable = ref<"DESC" | "ASC">("DESC");
const IID = ref<number | undefined | boolean>();
const limit = ref(20);
const offset = ref(0);
const order = ref<KIuser>("num");
const title = ref("添加");
const ruleForm = ref<Alymodel.IMlession>(assign({}, {}));

const tableData = ref<Alymodel.IMlession[]>([])




const count = ref(0)

function create(data: Alymodel.IMlession | false) {
    if (data) {
        ruleForm.value = markRaw(data)
    } else {
        ruleForm.value = {}
    }
    dialogVisible.value = true

}

onMounted(() => {
    start();
});

async function start() {
    try {
        let obj: Iobj<Alymodel.IMlession> = {
            _limit: limit.value,
            _offset: offset.value,
            _order: order.value,
            _sortable: sortable.value,
            course_ID: p.ID
        };
        const data = await asyncmiaoadminselectlession(obj)
        tableData.value = data.rows
        count.value = data.count
    } catch (e: any) {
        ElMessage.error(e);
    }
}

async function closed() {
    await start();
    IID.value = !IID.value;
}


async function delteamuser(ID: number) {
    ElMessageBox.confirm("是否删除此小节？", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(() => {
            asyncmiaoadmindellession({ ID })
                .then(() => {
                    ElMessage.success("删除成功");
                    start();
                })
                .catch((e) => {
                    ElMessage.error("删除失败" + e);
                });
        })
        .catch(() => { });
}

async function submit() {
    ruleForm.value.course_ID = p.ID
    try {
        await asyncmiaoadmincreatedorupdatelession(ruleForm.value)
        ElMessage.success('添加成功')
        start()
        dialogVisible.value = false
    } catch (e) {
        ElMessage.error(String(e))
    }
}


</script>